<template>
  <div class="my-top">
    <div class="city-select">
      <select v-model="selectedProvince" name="province">
        <option v-for="item in provinceList" :key="item.code" :value="item">{{ item.name }}</option>
      </select>
      <select v-model="selectedCity" name="city">
        <option v-for="item in cities" v-bind:key="item.code" :value="item">{{ item.name }}</option>
      </select>
      <select v-model="selectedBlock" name="block">
        <option v-for="item in blocks" :key="item.code" :value="item">{{ item.name }}</option>
      </select>
    </div>
  </div>
</template>
<script>
/**
 *  省 市 区/县城  三联动选择器
 */
import provinces from '@/assets/js/provinces.js'
import Vue from 'vue'
export default {
  name: 'App',
  data() {
    return {
      dep_code: '',
      provinces,
      selectedProvince: provinces[0],
      provinceList: [],
      selectedCity: 0,
      selectedBlock: 0,
      cities: 0,
      blocks: 0
    }
  },
  computed: {
    info() {
      return {
        province: this.selectedProvince.code,
        city: this.selectedCity.code,
        block: this.selectedBlock.code
      }
    }
  },
  watch: {
    selectedProvince(newVal, oldVal) {
      // 港澳台数据只有一级,特殊处理
      if (
        newVal.sheng === '71' ||
        newVal.sheng === '81' ||
        newVal.sheng === '82'
      ) {
        this.cities = [newVal]
        this.blocks = [newVal]
      } else {
        this.cities = this.provinces.filter((item) => {
          if (item.level === 2 && item.sheng && newVal.sheng === item.sheng) {
            return true
          }
        })
      }
      // 此时在渲染DOM,渲染结束之后再选中第一个
      Vue.nextTick(() => {
        this.selectedCity = this.cities[0]
        this.$emit('input', this.info)
      })
    },
    selectedBlock() {
      Vue.nextTick(() => {
        this.$emit('input', this.info)
      })
    },
    selectedCity(newVal) {
      // 选择了一个市,要选择区了 di是城市的代表,sheng
      if (
        newVal.sheng === '71' ||
        newVal.sheng === '81' ||
        newVal.sheng === '82'
      ) {
        this.blocks = [newVal]
        this.cities = [newVal]
      } else {
        this.blocks = this.provinces.filter((item) => {
          if (
            (item.level === 3 &&
              item.sheng &&
              item.sheng == newVal.sheng &&
              item.di === newVal.di &&
              item.name !== '市辖区') || (item.name == '--县--')
          ) {
            return true
          }
        })
      }
      Vue.nextTick(() => {
        this.selectedBlock = this.blocks[0]
        // 触发与 v-model相关的 input事件
        this.$emit('input', this.info)
      })
    }
  },
  created() {
    this.provinceList.push(this.provinces[0])
    // 数据初始化,默认选中北京市,默认选中第一个;北京市数据为总数据的前18个
    const beijing = this.provinces
    this.cities = beijing.filter((item) => {
      if (item.level === 2) {
        return true
      }
    })
    this.selectedCity = this.cities[0]
    this.blocks = beijing.filter((item) => {
      if (item.level === 3) {
        return true
      }
    })
    this.selectedBlock = this.blocks[0]
  }
}
</script>
<style lang="scss" scoped>
.city-select select {
  margin: 10px 0 0 20px;
  outline: 0;
  display: inline-block;
  line-height: 1.5;
  color: #fff;
  vertical-align: middle;
  //   border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: 8%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: rgba(6, 30, 93, 0.8);
}
select option {
  text-align: center;
}
</style>
